<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<!-- 遍历 each -->
<script type="text/javascript">

// 页面加载事件
$(document).ready(function(){
	
  $("button").click(  
		  
	  function(){
		  
	    $("li").each(
	   	  function(){
	   		 // this 代表是当前的 遍历到 DOM 元素
	   		 // $(this) ==> DOM对象 转 jQuery 对象
	   		 // text() ==》 innerText
	         alert($(this).text());  
	      });
	    
	  }

  );
  
});
</script>

<button>输出每个列表项的值</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>

<!-- 过滤 filter  -->
<hr>
  <div>a</div>
  <div class="middle">b</div>
  <div class="middle">c</div>
  <div class="middle a">d</div>
  <div class="middle a">e</div>
  <div></div>
<script>
	// css ==> dom.style.
	// 链式调用
  $("div").css("background", "#c8ebcc")
  		  .filter(".middle")   // 过滤出 .middle div
  		  .css("border", "1px solid red")
	  		.filter(".a")   // 过滤出 .a div
		  .css("background", "blue");
</script>

<hr>

<!-- 静态方法 map  -->
<div id="aaa"></div>
<p></p>
<span></span>
<script>
// 静态方法 map 转换元素
$(function () { 
	var arr = [ "a", "b", "c", "d", "e" ];
	
	$("#aaa").text(arr.join(", "));
	
	arr = $.map(arr, function(n, i){
		return (n.toUpperCase() + i);
	});
	$("p").text(arr.join(", "));
	
	
	arr = $.map(arr, function (a) {
		return a + a;
	});
	$("span").text(arr.join(", "));
})
</script>

<!-- 往里找 children -->
<hr>
  <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>

    <p>And One Last Time</p>
  </div>
<script>
$("div").children(".selected").css("color", "blue");
</script>


<hr>

<!-- 往里找 find -->
<div style="width:500px;">
	<ul>
		<li>
			<span>span (孙节点)</span>
		</li>
	</ul>   
</div>
<script>
$(document).ready(function(){
	$("ul").children("span").css({"color":"red","border":"2px solid red"});
});
</script>


</body>
</html>